<template>
  <view class="hotel-card" @click="hoteldetail(hotel)">
    <image v-if="hotel.pictures" :src="hotel.headImageUrl" class="hotel-image"></image>
    <image v-else :src="hotel.blImageUrl" class="hotel-image"></image>
	<view class="hoteldistance">{{convertToKilometers(hotel.distance)}}</view>
    <view class="hotel-info">
		<view class="hotel-title">
			<view class="hotel-name">{{ hotel.name }}</view>
			<view class="hotel-price"><text style="font-size: 20rpx;">￥</text>{{hotel.minPrice}}<text style="font-size: 20rpx;">起</text></view>
			
		</view>
		<view class="hotel-location">{{ hotel.address }}</view>
		<view class="hotel-evaluate">{{ hotel.introduce }}</view>
		<view class="hotel-services">
			<text v-for="(service, index) in hotel.tags" :key="index" class="service-tag">
			  {{ getbad(service.code) }}
			</text>
		</view>
    </view>
  </view>
</template>
<script setup lang="ts"> 
	import { onMounted } from "vue";
	import {commonWordList} from "@/api/system";
	import {hotelDetail} from "@/hotelHomestay/api/hotelHomestay";
	defineProps<{
	  hotel: {};
	}>();
	const hoteldetail =(data)=>{
    let {id} = data;
	  uni.navigateTo({
		url:`/hotelHomestay/pages/hotelDteail/index?id=${id}`,
	  });
	}
	const badData = ref([])
	const queryCommonWordList = async () => {
		await commonWordList({keys:"HOTEL_TAG"}).then(res => { 
			badData.value = res.result.HOTEL_TAG
		});
	}; 
	const getbad = (val)=>{
		return badData.value.find(item => item.code == val)?.name || '';
	}
	function convertToKilometers(meters) { 
	  let kilometers = meters / 1000;
	  if(kilometers == 0) return null; 
	  if(kilometers != 0) return '距离我'+kilometers.toFixed(1)+'km'; 
	}
	onMounted(() => {
	    queryCommonWordList()
	})
</script>
<style scoped>
.hotel-card {   
	background-color: #fff;
	margin-bottom: 30px;
	border-radius: 20rpx;
}
.hoteldistance{ 
	color: #fff;
	position: relative;
	margin: -54rpx 0 0 0; 
	padding: 5rpx 10rpx;
	font-size: 24rpx; 
	line-height: 40rpx;
	background: rgba(159, 159, 159, 0.8);
	border-bottom-left-radius: 20rpx;
	border-bottom-right-radius: 20rpx;
}
.hotel-image {
	width: 100%;
	border-radius: 20rpx;
	height: 336rpx; 
}
.hotel-info {
	padding: 10px;
}
.hotel-title{
	display: flex;
	justify-content: space-between;
}
.hotel-name {
	width: 80%;
	font-family: PingFang SC;
	font-weight: bold;
	font-size: 39rpx;
	color: #2B2B24;
	font-weight: bold;
}
.hotel-location {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 25rpx;
  color: #2B2B24;
  margin: 4px 0;
}
.hotel-evaluate{
  color: #1B9C61;
  font-size: 12px; 
  margin: 4px 0;
}
.hotel-services {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 15px;
}
.service-tag {
  font-size: 10px;
  color: #000;
  background: #EEF0DF;
  padding: 2px 6px;
  border-radius: 4px;
}
.hotel-price {
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 32rpx;
  color: #AA5414;
  /* line-height: 17rpx; */
}
.price {
  font-size: 18px;
  color: #ff7d00;
}
</style>
